<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 搜索框 -->
		<view class="search-bar" @tap="goToSearch">
			<view class="search-box">
				<text class="iconfont icon-search"></text>
				<text class="placeholder">搜索帖子</text>
			</view>
		</view>

		<!-- 分类列表 -->
		<scroll-view class="category-scroll" scroll-x="true">
			<view class="category-list">
				<view 
					class="category-item" 
					v-for="item in categories" 
					:key="item.id"
					:class="{ active: currentCategory === item.id }"
					@tap="switchCategory(item.id)"
				>
					{{ item.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 帖子列表 -->
		<scroll-view class="post-list" scroll-y="true">
			<post-waterfall :posts="posts" />
		</scroll-view>

		<view class="category-panel" :class="{ open: isPanelOpen }">
			<view class="category-panel-header">
				<text>分类列表</text>
				<text class="close-btn" @tap="togglePanel">关闭</text>
			</view>
			
			<view class="search-wrapper">
				<view class="search-box">
					<text class="iconfont icon-search"></text>
					<input 
						class="search-input" 
						type="text" 
						v-model="searchQuery" 
						placeholder="搜索分类" 
						confirm-type="search"
						@confirm="handleSearch"
					/>
					<text 
						v-if="searchQuery"
						class="clear-btn iconfont icon-close"
						@tap="clearSearch"
					></text>
				</view>
			</view>
			
			<!-- 搜索结果提示 -->
			<view class="search-result-tip" v-if="searchQuery && filteredCategories.length > 0">
				找到 {{ filteredCategories.length }} 个相关分类
			</view>
			<!-- 无搜索结果提示 -->
			<view class="empty-result" v-if="searchQuery && filteredCategories.length === 0">
				<text class="iconfont icon-empty"></text>
				<text>未找到相关分类</text>
			</view>
			
			<view class="category-panel-list">
				<view 
					class="category-panel-item" 
					v-for="item in filteredCategories" 
					:key="item.id"
					:class="{ active: currentCategory === item.id }"
					@tap="switchCategory(item.id)"
				>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<view class="category-toggle" @tap="togglePanel">
			<text style="color: #fff;" class="iconfont icon-icon-menu"></text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { api } from '@/utils/request'
import PostWaterfall from '@/components/PostWaterfall.vue'

// 分类列表
const categories = ref([])
// 当前选中的分类
const currentCategory = ref(null)
// 帖子列表
const posts = ref([])
// 是否正在加载
const loading = ref(false)

// 获取状态栏高度
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)

// 控制面板的显示状态
const isPanelOpen = ref(false);

// 搜索查询
const searchQuery = ref('');

// 获取分类列表
const getCategories = async () => {
	try {
		const res = await api.request({
			url: '/api/post/get_category/',
			method: 'GET'
		})
		if(res.code === 200) {
			categories.value = res.data
			// 默认选中第一个分类
			if(res.data.length > 0) {
				currentCategory.value = res.data[0].id
				getPosts()
			}
		}
	} catch(err) {
		console.error('获取分类失败', err)
	}
}

// 切换分类
const switchCategory = (id) => {
	if(currentCategory.value === id) return
	currentCategory.value = id
	posts.value = []
	getPosts()
	isPanelOpen.value = false
}

// 获取帖子列表
const getPosts = async () => {
	loading.value = true
	try {
		const res = await api.request({
			url: '/api/post/get_category_post/',
			method: 'GET',
			data: {
				category_id: currentCategory.value,
			}
		})
		if(res.code === 200) {
			posts.value = res.data
		}
	} catch(err) {
		console.error('获取帖子失败', err)
	} finally {
		loading.value = false
	}
}

// 页面加载时获取分类
onMounted(() => {
	getCategories()
})

// 跳转到搜索页面
const goToSearch = () => {
	uni.navigateTo({
		url: '/pages/search/post_search'
	})
}

// 切换面板显示状态
const togglePanel = () => {
	isPanelOpen.value = !isPanelOpen.value;
};

// 过滤后的分类列表
const filteredCategories = computed(() => {
	if (!searchQuery.value) return categories.value;
	return categories.value.filter(category =>
		category.name.toLowerCase().includes(searchQuery.value.toLowerCase())
	);
});

// 添加搜索相关方法
const handleSearch = () => {
	// 可以在这里添加搜索时的额外处理
	console.log('搜索:', searchQuery.value)
}

const clearSearch = () => {
	searchQuery.value = ''
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

// 状态栏样式
.status-bar {
	background: #fff;
	width: 100%;
}

.search-bar {
	padding: 20rpx;
	background: #fff;
	// 添加底部阴影,区分层次
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	position: relative;
	z-index: 1;
	
	.search-box {
		height: 72rpx;
		background: #f5f5f5;
		border-radius: 36rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		
		.icon-search {
			font-size: 32rpx;
			color: #999;
			margin-right: 10rpx;
		}
		
		.placeholder {
			font-size: 28rpx;
			color: #999;
		}
		
		&:active {
			opacity: 0.7;
		}
	}
}

.category-scroll {
	background: #fff;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
	
	.category-list {
		white-space: nowrap;
		padding: 0 20rpx;
		
		.category-item {
			display: inline-block;
			padding: 10rpx 30rpx;
			margin-right: 20rpx;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #666;
			background: #f8f8f8;
			transition: all 0.3s;
			
			&.active {
				color: #fff;
				background: $uni-color-primary;
			}
		}
	}
}

.post-list {
	flex: 1;
	padding: 20rpx 20rpx 0;
	box-sizing: border-box;
	width: 100%;
	overflow-x: hidden;
}

.category-panel {
	position: fixed;
	top: 0;
	right: -900rpx;
	width: 300px;
	height: 100%;
	background: #fff;
	box-shadow: -2px 0 12px rgba(0,0,0,0.1);
	transition: right 0.3s ease;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding: 0;

	&.open {
		right: 0;
	}

	.category-panel-header {
		padding: var(--status-bar-height) 30rpx 0;
		height: calc(var(--status-bar-height) + 88rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		flex-shrink: 0;

		.close-btn {
			padding: 10rpx 20rpx;
			font-size: 28rpx;
			color: #999;
			
			&:active {
				opacity: 0.7;
			}
		}
	}

	.search-wrapper {
		padding: 20rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		flex-shrink: 0;
		
		.search-box {
			position: relative;
			display: flex;
			align-items: center;
			background: #f5f5f5;
			border-radius: 36rpx;
			padding: 0 20rpx;
			
			.icon-search {
				font-size: 32rpx;
				color: #999;
				margin-right: 10rpx;
			}
			
			.search-input {
				flex: 1;
				height: 72rpx;
				font-size: 28rpx;
				color: #333;
				background: transparent;
				border: none;
				padding: 0 10rpx;
				
				&::placeholder {
					color: #999;
				}
			}
			
			.clear-btn {
				padding: 10rpx;
				font-size: 28rpx;
				color: #999;
				
				&:active {
					opacity: 0.7;
				}
			}
		}
	}

	.search-result-tip {
		padding: 20rpx;
		font-size: 24rpx;
		color: #999;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		flex-shrink: 0;
	}

	.empty-result {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		color: #999;
		
		.icon-empty {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
		}
	}

	.category-panel-list {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		
		.category-panel-item {
			margin: 0 20rpx;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:active {
				background: #f9f9f9;
			}
			
			&.active {
				color: $uni-color-primary;
				font-weight: 500;
				background: #f8f8f8;
				
				&::after {
					content: '';
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: $uni-color-primary;
				}
			}
		}
	}
}

.category-toggle {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 80rpx;
	height: 80rpx;
	background: #fff;
	// background: #696cff;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	transition: background 0.3s ease;

	text {
		font-size: 36rpx;
		color: #fff;
	}

	&:hover {
		// background: #5f62e6;
		background: #fff;
		opacity: 0.8;
	}
}
</style>
